<template>
	<view>
		<view class="page">

			<view class="section">
				<view class="title">
					<view class="title-left">预约信息</view>
					<view class="title-right"></view>
				</view>
				<view class="padding-15">
					<view class="">
						<view>{{pageInfo.pageInfo.deptName}}</view>
						<view class="gray">{{pageInfo.pageInfo.docName}}</view>
					</view>
					<view class="left-right other bottom-line">
						<view>就诊信息</view>
						<view class="gray">
							<view>{{pageInfo.item.numDate}} {{pageInfo.item.weekName}} {{getTxt(pageInfo.item.ampm)}}
							</view>
							<view>(总号源{{pageInfo.docInfo.totalNum}}, 余号{{pageInfo.docInfo.residueNum}})
								{{pageInfo.item.numTime}}
							</view>
						</view>
					</view>
					<view class="left-right other bottom-line">
						<view>支付方式</view>
						<view class="gray">在线支付</view>
					</view>
					<view class="left-right other">
						<view>挂号费</view>
						<view class="main-color">{{pageInfo.docInfo.bookFee/100}}元</view>
					</view>
				</view>
			</view>

			<view class="blank"></view>

			<view class="blank-dark"></view>

			<!--就诊人信息-->
			<view class="section" v-if="Object.keys(defaultPat).length !== 0">
				<view class="title">
					<view class="title-left">就诊人信息</view>
					<view class="title-right" @click="changeUser">切换就诊人 &gt;</view>
				</view>
				<view class="padding-15">
					<view class="left-right other bottom-line">
						<view>姓名</view>
						<view class="gray">{{defaultPat.commpatName}}</view>
					</view>
					<view class="left-right other bottom-line">
						<view>手机号</view>
						<view class="gray">{{getMobile(defaultPat.commpatMobile)}}</view>
					</view>
					<view class="left-right other bottom-line">
						<view>身份证号</view>
						<view class="gray">{{getIdCard(defaultPat.commpatIdcard)}}</view>
					</view>
					<view class="left-right other bottom-line">
						<view>病案号</view>
						<view class="gray the-card">
							<view v-if="cardList.length>0">
								<text>{{defaultCardInfo.visitCardNumber}}</text>
								<text>[{{defaultCardInfo.cardType==0?'自费卡':'医保卡'}}]</text>
								<text class="main-color" @click="switchCard(1)">切换卡 &gt;</text>
							</view>
							<view v-else>
								<text class="main-color" @click="switchCard(2)">新建卡 &gt;</text>
							</view>

						</view>
					</view>
				</view>
			</view>
			<view class="section" v-if="Object.keys(defaultPat).length === 0">
				<view class="title">
					<view class="title-left">就诊人信息</view>
					<view class="title-right" @click="add">新增就诊人 &gt;</view>
				</view>
			</view>
			<!--      就诊人信息end-->

			<view class="btn" @click="createOrder">确认挂号</view>
		</view>


		<!--就诊人列表弹框-->
		<uni-popup ref="popup" type="bottom" class="my-popup" background-color="#fff">
			<view class="popup-title">
				<view class="title">选择就诊人</view>
			</view>
			<view class="popup-content">
				<view class="item" v-for="(item, index) in patList" :key="index" @click="selectPat(item)">
					<text>{{item.commpatName}}</text>
					<text>{{getMobile(item.commpatMobile)}}</text>
				</view>
			</view>
			<view class="blank-dark"></view>
			<view class="close bottom-line" @click="add">新增就诊人</view>
			<view class="close" @click="cancel">取消</view>
		</uni-popup>
		<!--就诊人列表弹框 end-->

		<!--就诊卡列表弹框-->
		<uni-popup ref="popup_card" type="bottom" class="my-popup" background-color="#fff">
			<view class="popup-title">
				<view class="title">选择就诊卡</view>
			</view>
			<view class="popup-content">
				<view class="item" v-for="(item, index) in cardList" :key="index" @click="selectCard(item)">
					<text>{{item.visitCardNumber}}</text>
					<text>{{item.cardType==0?'自费卡':'医保卡'}}</text>
				</view>
			</view>
			<view class="blank-dark"></view>
			<view class="close bottom-line" @click="addCard">新增就诊卡</view>
			<view class="close" @click="cancelCard">取消</view>
		</uni-popup>
		<!--就诊人列表弹框 end-->

		<!--新增就诊卡弹窗-->
		<uni-popup ref="popup_add_card" type="bottom" class="my-popup" background-color="#fff">
			<view class="popup-title">
				<view class="title">新建就诊卡</view>
			</view>
			<view class="popup-content">
				<view class="item" @click="selectAddCard(0)">
					自费卡建档
				</view>
				<view class="item" @click="selectAddCard(1)">
					医保卡建档
				</view>
			</view>
			<view class="blank-dark"></view>
			<view class="close" @click="cancelAddCard">取消</view>
		</uni-popup>
		<!--新增就诊卡弹窗 end-->

		<view class="blank"></view>
		<view class="blank"></view>

	</view>
</template>

<script>
	import requestV2 from '@/utils/request'
	import {
		conertIdCardStr,
		convertMobileStr
	} from "@/utils";
	export default {
		data() {
			name: "就诊信息确认"
			return {
				pageInfo: {
					item: {},
					docInfo: {}
				},
				dataList: [],
				patList: [],
				defaultPat: {},
				cardList: [], //就诊卡列表
				defaultCardInfo: {},
			}
		},
		onLoad() {
			this.pageInfo = this.$store.state.confirmPayInfo
			console.log(`======onload 拉取就诊人信息===this.pageInfo====>`, this.pageInfo)
			this.getPatList()
		},
		onShow() {
			//医保卡绑卡成功后,页面回退逻辑 start
			console.log(`======this.$store.state.temp=======>`, this.$store.state.temp)
			let obj = this.$store.state.temp;
			if (obj?.sign === 'medical10001') {
				this.getHisCardList(this.defaultPat)
			}
			//医保卡绑卡成功后,页面回退逻辑 end

			if (obj?.sign === 'medical10002') {
				console.log(`====新增完用户, 重新拉取就诊人=========>`, )
				this.getPatList()
			}
		},
		methods: {
			getMobile(mobile) {
				if (!mobile) {
					return ''
				}
				return convertMobileStr(mobile)
			},
			getIdCard(id) {
				if (!id) {
					return ''
				}
				return conertIdCardStr(id)
			},
			getTxt(txt) {
				let tx = '全天'
				if (txt == 1) {
					tx = '上午'
				}
				if (txt == 2) {
					tx = '下午'
				}
				return tx
			},
			changeUser() {
				this.$refs.popup.open('bottom')
			},
			/**
			 * 新增就诊人
			 */
			add() {
				console.log(`======add===新增就诊人====>`, )
				uni.navigateTo({
					url: `/pagesUser/thePatient/addAdult`
				});
			},
			cancel() {
				this.$refs.popup.close()
			},
			cancelCard() {
				this.$refs.popup_card.close()
			},
			cancelAddCard() {
				this.$refs.popup_add_card.close()
			},

			switchCard(flag) {
				if (flag === 1) {
					//弹窗-切换卡
					this.$refs.popup_card.open('bottom')
				} else {
					//新增卡(新建卡)
					this.$refs.popup_add_card.open('bottom')
				}
			},
			addCard() {
				console.log(`======add==addCard=====>`, )
				this.cancelCard()
				this.switchCard(2)
			},

			/**
			 * 选择就诊人
			 */
			selectPat(item) {
				console.log(`=======item======>`, item)
				this.$refs.popup.close()
				this.defaultPat = item
				this.getHisCardList(item)
			},
			selectCard(item) {
				console.log(`======selectCard======>`, )
				this.defaultCardInfo = item
				this.$refs.popup_card.close()
			},
			selectAddCard(flag) {
				console.log(`======selectAddCard======>`, )
				this.$refs.popup_add_card.close()
				if (flag === 0) {
					this.createCard(flag)
				} else {
					this.$store.state.temp = this.defaultPat
					uni.navigateTo({
						url: '/pagesIndex/registered/medicalCard'
					})
				}

			},

			/**
			 * 就诊列表
			 */
			async getPatList() {
				let res = await requestV2.post({
					service: 'smarthos.user.commpat.list'
				})
				console.log("restip==>", res);
				if (res.code == '0') {
					this.patList = res.list || []
					if (this.patList.length > 0) {
						this.defaultPat = this.patList.find(ele => ele.self)
						console.log(`=====默认就诊人是========>`, this.defaultPat)
						if (!this.defaultPat) {
							uni.showToast({
								icon: 'none',
								title: '未找到默认就诊人, 请添加就诊人'
							});
						} else {
							this.getHisCardList(this.defaultPat)
						}
					}
				} else {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: res.data.msg
					});
				}
			},


			/**
			 * 自费建卡,  医保建卡在新的页面单独绑定
			 */
			async createCard(flag) {
				let payload = {};
				payload.cardType = flag
				payload.userCommonPatId = this.defaultPat.id
				payload.service = 'smarthos.baicaoyuan.pat.bind.visit.card';
				let res = await requestV2.post(payload)
				console.log(`==user.pat.createCard===========>`, res)
				uni.showToast({
					icon: 'none',
					title: res.msg
				});
				if (res.code == '0') {
					this.getHisCardList(this.defaultPat)
				}
			},


			/**
			 * 查询his就诊卡列表
			 */
			async getHisCardList(item) {
				console.log(`===getHisCardList==========>`, item)
				let payload = {};
				payload.cardType = ''
				payload.userCommonPatId = item.id
				payload.service = 'smarthos.baicaoyuan.pat.visit.card.list';

				let res = await requestV2.post(payload)
				console.log(`==user.pat.index===========>`, res)
				if (res.code == '0') {
					this.cardList = res.list || []
					if (this.cardList.length > 0) {
						this.defaultCardInfo = this.cardList[0]
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
				}
			},


			/**
			 * 预约挂号登记
			 */
			createOrder() {
				let _this = this;
				let json = {};
				//
				if (Object.keys(this.defaultCardInfo).length === 0) {
					uni.showToast({
						icon: 'none',
						title: '第一次挂号请先添加就诊人和就诊卡'
					});
					return
				}

				json.type = uni.getStorageSync("guahao_flag")
				json.docId = this.pageInfo.docInfo.docId
				json.deptId = this.pageInfo.docInfo.deptId
				json.patientId = this.defaultCardInfo.patientId
				json.numId = this.pageInfo.item.numId
				json.userCommonPatId = this.defaultPat.id
				json.visitDate = this.pageInfo.item.numDate
				json.cardType = this.defaultCardInfo.cardType
				json.ampm = this.pageInfo.item.ampm
				json.token = uni.getStorageSync('token');
				if (json.cardType == 1) {
					json.medCardNo = this.defaultCardInfo.visitCardNumber
				}
				json.service = 'smarthos.baicaoyuan.gh.order.register';
				console.log(`======预约挂号登记=======>`, json)
				_this.request.default.urlRequest(json, 'POST', (res) => {
					console.log(`==user.pat.createOrder===========>`, res)
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					});
					if (res.data.code == '0') {
						if (res.data.obj.regfee === 0) {
							uni.showToast({
								icon: 'none',
								title: '下单成功'
							});
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}, 1500)
						} else {
							//吊起支付
							this.payment(res.data.obj)
						}

					}
				});
			},

			payment(obj) {
				let _this = this;
				let json = {};
				json.orderId = obj.id
				json.loginUserId = uni.getStorageSync('userinfo').homePatHospitalVo.loginUserId
				json.openId = uni.getStorageSync('openid')
				json.payProvider = 'WECHATPAY'
				json.token = uni.getStorageSync('token');
				json.service = 'smarthos.baicaoyuan.gh.order.pay';
				_this.request.default.urlRequest(json, 'POST', (res) => {
					console.log(`==user.pat.payment===========>`, res)
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					});
					if (res.data.code == '0') {
						//回传参数-吊起微信支付
						let datajson = JSON.parse(res.data.obj.pay_str);
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: datajson.timeStamp,
							nonceStr: datajson.nonceStr,
							package: datajson.package,
							signType: datajson.signType,
							paySign: datajson.paySign,
							success: function(res) {
								uni.showToast({
									icon: 'none',
									position: 'bottom',
									title: '支付成功'
								});
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/index'
									});
								}, 1500)
							},
							fail: function(err) {}
						});
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.section {
		padding: 15px;
		font-size: 14px;
		color: #333333;
		line-height: 25px;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title-left {
				font-size: 14px;
				font-weight: bold;
			}

			.title-right {
				color: $uni-color-primary;
			}
		}

		.other {
			padding: 15px 0;

			.the-card {
				padding: 0 7px;

				.main-color {
					color: $uni-color-primary;
				}

				text {
					padding-left: 5px;
				}
			}
		}
	}

	//就诊人列表
	.my-popup {
		.popup-title {
			padding: 15px;
			border-bottom: 1px solid #f2f2f2;

			.title {
				padding: 5px 10px;
				text-align: center;
				font-size: 16px;
				color: #111111;

				>text {
					padding: 5px;
				}
			}
		}

		.close {
			padding: 10px 15px;
			text-align: center;
		}

		.popup-content {
			height: 200px;
			overflow-y: auto;
			margin: 0 15px;

			.item {
				padding: 15px;
				text-align: center;
				font-size: 14px;
				color: #666666;
				border-bottom: 1px solid #f2f2f2;

				>text {
					padding: 10px;
				}
			}
		}
	}

	//todo
</style>